<template>
  <div class="flow" ref="main" style="width: 100%;height: 100%; background-color: rgb(238, 235, 220);"></div>
</template>

<script>
  export default{
    props:{
      tempData:Object
    },
    data(){
      return{
        data:{}
      }
    },
    watch:{
      deep:true,
      tempData:function(newValue,oldValue){
       this.data = newValue
       this.initChart()
      }
    },
    methods:{
      initChart(){
        let myChart = this.$echarts.init(this.$refs.main);
          var colors = ["#5793f3", "#d14a61", "#675bba"];
          let option = {
            grid: {
                top: 15,
                left: 35,
                right: 40,
                bottom: 30
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
              name: '时间',
              splitNumber :20,
              data: this.data.timeValueList.map(item => {
                return item.time;
              }),
              // minorTick: {
              //     show: true
              // },
              splitLine: {
                show: true
              },
              splitLine: {
                  lineStyle: {
                      color: '#ababab'
                  }
              },
              minorSplitLine: {
                  show: true,
                  lineStyle: {
                      color: '#ababab'
                  },
                  label:true
              },
            },
            yAxis: {
              name: this.data.sensorUnit,
              splitLine: {
                show: true
              },
              minorSplitLine: {
                  show: true,
                  lineStyle: {
                      color: '#ababab'
                  },
                  label:true
              },
            },
            series: {
              name: this.data.sensorUnit+"°c",
              type: "line",
              clip: true,
              data: this.data.timeValueList.map(item => {
                return item.value;
              }),
            }
          };
        myChart.setOption(option);
      },
    },
    mounted() {
      this.initChart()
    }
  }
</script>

<style>
</style>
